<!--
 * @Author: liyin 2179253556@qq.com
 * @Date: 2022-11-16 08:08:04
 * @LastEditors: liyin 2179253556@qq.com
 * @LastEditTime: 2024-03-01 10:58:39
 * @FilePath: \consumption-data-screen\src\components\Common\Header.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <!-- 头部 -->
    <div class="header">
      <el-row class="main-flex">
        <el-col :span="12">
          <div class="row school-logo-flex">
            <div class="image-flex-box">
              <!-- <el-image :src="SchoolInfo.school_logo"></el-image> -->
              <el-image src="http://host.hlzhjy.com:30000/View/img/logo.dd9700b5.png"></el-image>
            </div>
            <!-- {{ SchoolInfo.school_name }} -->
            东莞宏联测试学校
          </div>
        </el-col>
        <el-col :span="12">
          <div class="times-right-box">
            <span>{{ dataTime }}&nbsp;{{ times }}</span>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Home',
  data() {
    return {
      type: this.$route.query.type,
      times: '',
      TimeStamp: '',
      dataTime: '',
      fullscreen: false,
      SchoolInfo: {
        school_name: '',
        school_logo: ''
      }
    }
  },
  mounted() {
    this.getShool()
    this.getTimes()
    // 获取当前日期
    setInterval(() => {
      this.TimeStamp++
      this.dataTime = this.getNowData(this.TimeStamp)
      this.times = this.getNowTime(this.TimeStamp)
    }, 1000)
  },
  methods: {
    async getShool() {
      const { data: res } = await this.$http.get('/SchoolUser/School/')
      if (res.code !== 1) return this.$message.error(res.msg)
      Object.keys(res.data).forEach(item => {
        if (item.indexOf('-') !== -1) {
          if (Number(item.split('-')[0]) === 2) {
            this.SchoolInfo.school_name = res.data[item]
          } else if (Number(item.split('-')[0]) === 11) {
            this.SchoolInfo.school_logo = res.data[item]
          }
        }
      })
    },
    async getTimes() {
      const { data: res } = await this.$http.post('/TimeStamp')
      if (res.code !== 1) return this.$message.error(res.msg)
      this.TimeStamp = JSON.parse(res.data.time)
      this.dataTime = this.getNowData(this.TimeStamp)
      this.times = this.getNowTime(this.TimeStamp)
    },
    getNowTime(timestamp) {
      var date = new Date(timestamp * 1000)// 时间戳若为10位时需*1000
      var h = date.getHours() >= 10 ? date.getHours() : '0' + date.getHours()
      var m = date.getMinutes() >= 10 ? date.getMinutes() : '0' + date.getMinutes()
      return `${h}:${m}`
    },
    getNowData(timestamp) {
      var date = new Date(timestamp * 1000)// 时间戳若为10位时需*1000
      var Y = date.getFullYear()
      var M = date.getMonth() + 1 >= 10 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1)
      var D = date.getDate() >= 10 ? date.getDate() : '0' + date.getDate()
      // 星期
      var week = date.getDay()
      return `${Y}年${M}月${D}日 ` + this.weeks(week)
    },
    weeks(s) {
      if (s === 0) {
        return '星期日'
      } else if (s === 1) {
        return '星期一'
      } else if (s === 2) {
        return '星期二'
      } else if (s === 3) {
        return '星期三'
      } else if (s === 4) {
        return '星期四'
      } else if (s === 5) {
        return '星期五'
      } else {
        return '星期六'
      }
    }
  }
}
</script>
<style lang="less" scoped>
.main-flex {
  height: 68px;
  position: relative;
  box-sizing: border-box;
  background: url('../../assets/img/biaoti.png') no-repeat;
  background-size: cover;
  padding: 0 26px;
  display: flex;

  .school-logo-flex {
    margin-top: 10px;
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
    color: #FFFFFF;

    .image-flex-box {
      width: 32px;
      height: 32px;
      margin-right: 12px;
      border-radius: 50%;
      background-color: #fff;
      border: 3px solid #ffffff;
      box-sizing: border-box;

      .el-image {
        width: 100%;
        height: 100%;
      }
    }
  }

  .screen-name-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 586px;
    height: 115px;
    position: relative;
    margin-top: -5px;

    .el-image {
      height: 115px;
    }
  }

  .times-right-box {
    margin-top: 15px;
    text-align: right;
    color: #ffffff;
    font-weight: bold;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
}
</style>

